<template>
  <view class="limit-select-container">
    <view class="limit-select-wraps">
      <ex-popup :show="show" :title="$t('exchange.labels[2]')" @onClose="close">
        <block slot="content">
          <view class="select-wraps">
            <view
              class="select-item"
              v-for="(item, index) in list"
              :key="index"
              :class="{ active: current == index }"
              :data-current="index"
              @click="onSelectItemClick"
              hover-class="hover"
              :hover-stay-time="50"
            >
              {{ item.name }}
            </view>
          </view>
        </block>
      </ex-popup>
    </view>
  </view>
</template>

<script>
import ExPopup from "@/components/ExPopup/ExPopup";
export default {
  components: { ExPopup },
  props: {
    current: { type: Number, default: 0 },
    show: { type: Boolean, default: false },
    list: { type: Array, default: () => [] },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    close() {
      this.$emit("close");
    },
    onSelectItemClick(e) {
      const current = e.currentTarget.dataset.current;
      this.$emit("onClick", current);
      this.close();
    },
  },
};
</script>

<style lang="less" scoped>
.limit-select-container {
  .limit-select-wraps {
    .select-wraps {
      text-align: center;
      .select-item {
        line-height: 80rpx;
        height: 80rpx;
        color: var(--brand-color);
        font-weight: bold;
        position: relative;
        &.active {
          color: @brand-color;
        }
        &.hover {
          background-color: @bg-hover-color;
        }
        &::after {
          content: " ";
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 2rpx;
          background-color: var(--border-color);
          transform: scaleY(0.5);
        }
      }
    }
  }
}

/deep/.ex-popup-mask{
  margin-bottom: 100rpx;
}
</style>
